<template>
  <div class="download">
<!--    内容-->
    <div class="content">
      <div class="topContent">
<!--        ios-->
<!--        <button @click.stop="download(1)">-->
<!--          <img src="http://job.dayinyun.com/downloadIos.png" alt="">-->
<!--          <div class="buttonWord">-->
<!--            <div>Download on the</div>-->
<!--            <div>App Store</div>-->
<!--          </div>-->
<!--        </button>-->
<!--        安卓-->
        <button @click.stop="download(2)">
          <img src="http://job.dayinyun.com/downloadAndrdoid.png" alt="">
          <div class="buttonWord">Android</div>
        </button>
      </div>
      <div class="word">
        <h3>海量模版，任意场景背景切换</h3>
        <span>让视频好和直播变的美轮美奂，创意十足，让印象记忆深刻</span>
      </div>
    </div>
    <!--    分享弹框-->
    <div v-if="shareShow" class="sharePopUp" @click.stop="closeShade()">
      <img src="http://job.dayinyun.com/shareVideoImg.png" alt="">
    </div>
  </div>
</template>

<script>

  export default {
    name:"download",
    data() {
      return {
        shareShow:false
      }
    },
    mounted() {
    },
    methods:{
      // 关闭弹框
      closeShade(){
        this.shareShow = false
      },
      // 判断是否是微信打开
      isWeixin() {
        var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true; //微信打开
        } else {
          return false; //不是微信打开
        }
      },
      // 下载app
      download(type){
        if(this.isWeixin()){
          this.shareShow = true;
        }else{
          // type 1 ios 2 Android
          let url = type*1==1?'':'https://h5.hongjitimes.com/v9.apk'
          window.location.href = url;
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .download{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#ffffff;
    .topContent{
      width:100%;
      height:9.94rem;
      background-image: url(http://job.dayinyun.com/downloadBg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 0.5rem;
      box-sizing: border-box;
      button{
        width:3rem;
        height:0.9rem;
        border-radius: 0.05rem;
        background:#FFFFFF ;
        border:none;
        outline: none;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        font-size: @fontSize38;
        font-family: @fontFamily500;
        font-weight: @fontWeight600;
        color: #000000;
        padding: 0 0.1rem;
        box-sizing: border-box;
        img{
          width:0.7rem;
          height:auto;
        }
        .buttonWord{
          div:nth-of-type(1){
            font-size: @fontSize22;
            font-family: @fontFamily400;
            font-weight: @fontWeight400;
            color: #000000;
          }
        }
      }
    }
    .word{
      width:100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding:0.3rem;
      box-sizing: border-box;
      h3{
        font-size: @fontSize40;
        font-family: @fontFamily500;
        font-weight: @fontWeight600;
        line-height: 1.16rem;
        color: #333333;
      }
      span{
        font-size: @fontSize32;
        font-family: @fontFamily500;
        font-weight: @fontWeight600;
        line-height: 0.5rem;
        color: #666666;
        text-align: center;
      }
    }
    .sharePopUp{
      position: fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,0.5);
      img{
        width:4.2rem;
        height:auto;
        position: fixed;
        top:0;
        right:0;
      }
    }
  }

</style>
